import { ref } from "vue"
export const usePopupEvent = (map, docName) => {
  const content = ref()
  const container = ref()
  //  const closer = ref(null)
  const eventFlag = ref(false)
  /* 监控的标志变量 */
  const monitorFlag = ref(false)
  // popup内容
  const popupInfo = ref("")
  let mysource = new ol.source.Vector({
    wrapX: false,
  })
  let mylayer = new ol.layer.Vector({
    source: mysource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
          color: "#1fffff",
        }),
      }),
    }),
  })
  let monitorsource = new ol.source.Vector({
    wrapX: false,
  })
  let monitorlayer = new ol.layer.Vector({
    source: monitorsource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: "#21a675",
        }),
      }),
    }),
  })
  setTimeout(() => {
    map.value.addLayer(mylayer)
    map.value.addLayer(monitorlayer)
  }, 200)
  let popup = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container.value,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: "bottom-center",
    //是否应该停止事件传播到地图窗口
    stopEvent: false,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
  })
  console.log(popup)
  const eventPop = () => {
    map.value.addOverlay(popup)
    eventFlag.value = !eventFlag.value
    if (eventFlag.value == true) {
      var service = { name: docName, layerId: 2 }
      Query.queryEventByGeom({
        service,
        /* 这样就能在函数外面拿到查询到的值 */
        callback: (res) => {
          var format = new Zondy.Format.PolygonJSON()
          /* 将mapgis要素json反序列化为ol.feature类型数组 */
          var features = format.read(res)
          /* 将查询到的要素添加到高亮图层中 */
          mysource.addFeatures(features)
        },
      })
      map.value.on("click", popQuery)
      map.value.on("pointermove", popClose)
    } else {
      map.value.un("click", popQuery)
      map.value.un("pointermove", popClose)
      map.value.removeOverlay()
      popup.setPosition(undefined)
      mysource.clear()
    }
  }
  const monitorPop = () => {
    console.log("mon")
  }
  let position = null
  function popQuery(evt) {
    var feature = map.value.forEachFeatureAtPixel(
      evt.pixel,
      function (feature, layer) {
        return feature
      }
    )
    if (feature) {
      // position = feature.getGeometry().flatCoordinates
      // console.log(position);
      try {
        position = feature.getGeometry().flatCoordinates
        console.log(popup)
        popup.setPosition([113, 40])
      } catch (error) {
        console.log(error)
      }
      // popup.setPosition(position)
      /* 这个就可以拿到fid,拿到之后去空间数据库查这条数据 */
      Query.queryByFID({
        fid: feature.id_,
        service: {
          name: docName,
          layerId: 2,
        },
        callback: (res) => {
          res = JSON.parse(JSON.stringify(res)).SFEleArray[0].AttValue
          popupInfo.value = `事件类型：${res[1]}<br/>
                          事件等级：${res[2]}<br/>
                          发生时间：${res[3]}<br/>
                          发生地点：${res[4]}<br/>
                          车牌号：${res[5]}<br/>
                          驾驶员：${res[6]}<br/>
                          `
          setTimeout(() => {
            content.value.innerHTML = popupInfo.value
          }, 1)
        },
      })
    }
  }
  function popClose(e) {
    var pixel = map.value.getEventPixel(e.originalEvent)
    var hit = map.value.hasFeatureAtPixel(pixel)
    map.value.getTargetElement().style.cursor = hit ? "pointer" : ""
  }

  return { eventPop, monitorPop, container, content }
}
